<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="goods_add">添加商品</el-button>
                </el-col>
            </el-row>
            <el-table border :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}" stripe :data="goodslist"> 
                <el-table-column type="index" width="80px" label="序号"></el-table-column>
                <el-table-column label="商品名称" prop="goods_name" width="450px"></el-table-column>
                <el-table-column label="商品价格(元)" prop="goods_price" width="120px"></el-table-column>
                <el-table-column label="商品重量" prop="goods_weight" width="80px"></el-table-column>
                <el-table-column label="创建时间" width="180px">
                    <template slot-scope="scope">
                        {{scope.row.add_time |dateformat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作"></el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination layout="prev, pager, next,sizes,total" :total="total" :page-sizes="[5, 10, 15]"></el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    created() {
        this.getgoodslist();
    },
    data() {
        return {
            queryinfo:{
                query:"",
                pagenum:"1",
                pagesize:"6"
            },
            goodslist:[],
            total:0,
        }
    },
    methods: {
        getgoodslist:async function() {
            const {data:res} =await this.$http.get("goods",{params:this.queryinfo});
            console.log(res);
            this.goodslist=res.data.goods;
            this.total=res.data.total;
        },
        goods_add:function() {
            this.$router.push("/goods_add")
        }
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    margin-left: 170px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.box-card {
    width: 1200px;
    margin: 0 auto;
}
.el-button {
    margin-bottom: 10px;
}
.el-row {
    margin-bottom: 10px;
}
.el-pagination {
    margin-top: 20px;
}
</style>